<template>
  <div class="container-f">
    <Breadcrumb :items="['题库']" />
    <div class="layout">
      <div class="layout-left-side">
        <a-row :gutter="[24, 8]">
          <a-col :span="24">
            <hot-spot-carousel />
          </a-col>
          <a-col :span="24">
            <problem-table />
          </a-col>
        </a-row>
      </div>
      <div class="layout-right-side">
        <a-space size="medium" direction="vertical" :style="{ width: '100%' }">
          <sign-in />
          <announcement />
          <images />
          <user-list />
        </a-space>
      </div>
    </div>
    <a-spin :loading="loading" style="width: 100%">
      <div class="report-content" ref="cozeContainer"></div>
    </a-spin>
  </div>
</template>

<script setup lang="ts">
import HotSpotCarousel from '@/views/problem/find/components/hot-spot-carousel.vue';
import ProblemTable from '@/views/problem/find/components/problem-table.vue';
import SignIn from '@/views/problem/find/components/sign-in.vue';
import Announcement from '@/views/problem/find/components/announcement.vue';
import Images from '@/views/problem/find/components/images.vue';
import UserList from '@/views/problem/find/components/user-list.vue';
import { ref, onMounted } from 'vue';

// 1. 声明 CozeWebSDK 的全局类型（避免 TS 报错）
declare global {
  interface Window {
    CozeWebSDK?: {
      WebChatClient: new (config: {
        config: { bot_id: string };
        componentProps: { title: string };
        auth: {
          type: string;
          token: string;
          onRefreshToken: () => string;
        };
        footer: {
          isShow: boolean;
          expressionText: string;
          linkvars: {
            name: object;
          };
        };
        container?: HTMLElement | null;
      }) => void;
    };
  }
}

// 2. 定义组件变量
const loading = ref(true);
const cozeContainer = ref<HTMLElement | null>(null);

// 3. 动态加载脚本并初始化
onMounted(() => {
  if (window.CozeWebSDK) {
    // 如果已加载（比如热更新场景）
    initCoze();
    return;
  }

  const script = document.createElement('script');
  script.src =
    'https://lf-cdn.coze.cn/obj/unpkg/flow-platform/chat-app-sdk/1.2.0-beta.5/libs/cn/index.js';
  script.onload = () => {
    initCoze();
    loading.value = false;
  };
  script.onerror = () => {
    console.error('Failed to load Coze SDK');
    loading.value = false;
  };
  document.body.appendChild(script);
});

// 4. 初始化 Coze 客户端（封装为独立函数）
function initCoze() {
  if (!window.CozeWebSDK) {
    console.warn('CozeWebSDK not available');
    return;
  }

  try {
    new window.CozeWebSDK.WebChatClient({
      config: {
        bot_id: '7488906280124497954' // 替换为你的真实 bot_id
      },
      componentProps: {
        title: 'AI答疑助手'
      },
      auth: {
        type: 'token',
        token:
          'pat_y83mTuRx0Kd45dDdoRWUct0Jg6zv4BQSmrSBnbiwO7YR0DNh8i65JTnOBgK7hlUB', // 替换为你的真实 token
        onRefreshToken: () =>
          'pat_y83mTuRx0Kd45dDdoRWUct0Jg6zv4BQSmrSBnbiwO7YR0DNh8i65JTnOBgK7hlUB' // 替换为你的刷新逻辑
      },
      footer: {
        isShow: true,
        expressionText: 'Powered by {{name}}&{{name1}}',
        linkvars: {
          name: {
            text: 'CodeInsight AI',
            link: 'https://www.test1.com'
          }
        }
      },

      container: cozeContainer.value ?? undefined // 安全的容器传递
    });
  } catch (err) {
    console.error('Coze initialization failed:', err);
  }
}
</script>

<style scoped lang="less">
.container-f {
  padding: 0 20px 20px;
  background-color: #f5f6f7;
  min-height: calc(100vh - 60px);
}

.layout {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  margin-top: 1px;

  &-left-side {
    flex-basis: 75%;
    background-color: #fff;
    border-radius: 4px;
    padding: 12px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);

    :deep(.arco-row) {
      width: 100%;
    }

    :deep(.carousel) {
      border-radius: 16px;
      overflow: hidden;

      img {
        height: 300px;
        object-fit: cover;
      }
    }
  }

  &-right-side {
    flex-basis: 23%;

    :deep(.arco-space-item) {
      width: 100%;
      background-color: #fff;
      border-radius: 4px;
      padding: 16px;
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    }
  }
}
</style>

<style lang="less" scoped>
// responsive
@media (max-width: @screen-lg) {
  .layout {
    flex-wrap: wrap;
    gap: 16px;

    &-left-side {
      flex: 1;
      flex-basis: 100%;
    }

    &-right-side {
      flex-basis: 100%;
    }
  }
}
</style>
